<template>
  <div >
    	<div class="header_box">
        <div class="left">我是header</div>
        <div class="right">
           <p>用户角色:</p>
          <div>
            <el-select v-model="value" placeholder="请选择" :disabled="isDisabled" @change='changeVal' style='position:relative;bottom:100px;left:400px'>
              <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
              </el-option>
           </el-select>
          </div>
         
          <div>退出</div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: "MHeader",
  data() {
    return {
      isDisabled: false,
      userInfo: ``,
      timeUser: null,
      timeNum: 0,
      value: 1,
      options: [{ label: "管理员", value: 1 }, { label: "专家", value: 2 }]
    };
  },
  created() {
    let that = this;
    // 获取本地存储
    that.getUserInfo();
    that.toggle()
  },
  methods: {
    // 获取localstorage
    getUserInfo() {
      let that = this;
      console.log(`获取本地用户数据>>>>>>>>>>>>>>>>>>>>`, that.timeNum);
      // 如果调用了10次就不执行
      if (that.timeNum === 10) {
        console.log(`return`);
        return false;
      } else {
        // 每300毫秒执行一次读取数据
        that.timeUser = setTimeout(() => {
          if (!that.userInfo) {
            that.timeNum++;
            let userInfo = JSON.parse(window.localStorage.getItem(`userInfo`));
            if (userInfo) {
              console.log(`已取到用户数据>>>>>>>>>>>>>>>>>>>>`);
              that.userInfo = userInfo;
              clearInterval(that.timeUser);
            } else {
              that.getUserInfo();
            }
          }
        }, 300);
      }
    },
    // 根据权限决定状态
    toggle() {
      let that = this;
      let state = that.userInfo.isWho;
      if (state === `z`) {
        console.log(`禁用选择器`);
        that.isDisabled = false;
      } else if (state === `g`) {
        console.log(`禁用选择器`);
        that.isDisabled = false;
      } else if (state === `zg`) {
        console.log(`打开选择器`);
        that.isDisabled = true;
      } else {
      }
    },
    // 选中的值
    changeVal(val) {
      let that = this;
      console.log(`这个值>>>>>>>>>>>>>>>`, val);
      if (val === 1) {
        this.navList = this.$store.state.router.typeB[0].children;
        this.$store.state.test.navList = this.navList;
        this.bbb = this.$store.state.router.typeB;
        this.$router.addRoutes(this.bbb);
        this.$router.push("/pages1");
      } else if (val === 2) {
        this.navList = this.$store.state.router.typeA[0].children;
        this.$store.state.test.navList = this.navList;
        this.aaa = this.$store.state.router.typeA;
        this.$router.addRoutes(this.aaa);
        this.$router.push("/pages4");
      }
    }
  }
};
</script>

<style>
/* 我无语 */
.header_box {
  display: flex;
  width: 100%;
}
</style>
